<h1 class="page_title">
		图片	</h1>
		<h2>
		1 响应式图库	</h2>
	<div class="codeView bs-docs-example" >
			<!-- SuperBox -->
		<div class="superbox ">
		    		<div class="superbox-list ">
					<img src="/static/img/superbox/superbox-thumb-1.jpg" data-img="/static/img/superbox/superbox-full-1.jpg" alt="" class="superbox-img ">
		</div>
    		<div class="superbox-list ">
					<img src="/static/img/superbox/superbox-thumb-2.jpg" data-img="/static/img/superbox/superbox-full-2.jpg" alt="" class="superbox-img ">
		</div>
    		<div class="superbox-list ">
					<img src="/static/img/superbox/superbox-thumb-3.jpg" data-img="/static/img/superbox/superbox-full-3.jpg" alt="" class="superbox-img ">
		</div>
    		<div class="superbox-list ">
					<img src="/static/img/superbox/superbox-thumb-4.jpg" data-img="/static/img/superbox/superbox-full-4.jpg" alt="" class="superbox-img ">
		</div>
    		<div class="superbox-list ">
					<img src="/static/img/superbox/superbox-thumb-5.jpg" data-img="/static/img/superbox/superbox-full-5.jpg" alt="" class="superbox-img ">
		</div>
    		<div class="superbox-list ">
					<img src="/static/img/superbox/superbox-thumb-6.jpg" data-img="/static/img/superbox/superbox-full-6.jpg" alt="" class="superbox-img ">
		</div>
    		<div class="superbox-list ">
					<img src="/static/img/superbox/superbox-thumb-7.jpg" data-img="/static/img/superbox/superbox-full-7.jpg" alt="" class="superbox-img ">
		</div>
    		<div class="superbox-list ">
					<img src="/static/img/superbox/superbox-thumb-8.jpg" data-img="/static/img/superbox/superbox-full-8.jpg" alt="" class="superbox-img ">
		</div>
    		<div class="superbox-list ">
					<img src="/static/img/superbox/superbox-thumb-9.jpg" data-img="/static/img/superbox/superbox-full-9.jpg" alt="" class="superbox-img ">
		</div>
    		<div class="superbox-list ">
					<img src="/static/img/superbox/superbox-thumb-10.jpg" data-img="/static/img/superbox/superbox-full-10.jpg" alt="" class="superbox-img ">
		</div>
    		<div class="superbox-list ">
					<img src="/static/img/superbox/superbox-thumb-11.jpg" data-img="/static/img/superbox/superbox-full-11.jpg" alt="" class="superbox-img ">
		</div>
    		<div class="superbox-list ">
					<img src="/static/img/superbox/superbox-thumb-12.jpg" data-img="/static/img/superbox/superbox-full-12.jpg" alt="" class="superbox-img ">
		</div>
    		<div class="superbox-list ">
					<img src="/static/img/superbox/superbox-thumb-13.jpg" data-img="/static/img/superbox/superbox-full-13.jpg" alt="" class="superbox-img ">
		</div>
    		<div class="superbox-list ">
					<img src="/static/img/superbox/superbox-thumb-14.jpg" data-img="/static/img/superbox/superbox-full-14.jpg" alt="" class="superbox-img ">
		</div>
    		<div class="superbox-list ">
					<img src="/static/img/superbox/superbox-thumb-15.jpg" data-img="/static/img/superbox/superbox-full-15.jpg" alt="" class="superbox-img ">
		</div>
    		<div class="superbox-list ">
					<img src="/static/img/superbox/superbox-thumb-16.jpg" data-img="/static/img/superbox/superbox-full-16.jpg" alt="" class="superbox-img ">
		</div>
    		<div class="superbox-list ">
					<img src="/static/img/superbox/superbox-thumb-17.jpg" data-img="/static/img/superbox/superbox-full-17.jpg" alt="" class="superbox-img ">
		</div>
    		<div class="superbox-list ">
					<img src="/static/img/superbox/superbox-thumb-18.jpg" data-img="/static/img/superbox/superbox-full-18.jpg" alt="" class="superbox-img ">
		</div>
    		<div class="superbox-list ">
					<img src="/static/img/superbox/superbox-thumb-19.jpg" data-img="/static/img/superbox/superbox-full-19.jpg" alt="" class="superbox-img ">
		</div>
    		<div class="superbox-list ">
					<img src="/static/img/superbox/superbox-thumb-20.jpg" data-img="/static/img/superbox/superbox-full-20.jpg" alt="" class="superbox-img ">
		</div>
    		<div class="superbox-list ">
					<img src="/static/img/superbox/superbox-thumb-21.jpg" data-img="/static/img/superbox/superbox-full-21.jpg" alt="" class="superbox-img ">
		</div>
    		<div class="superbox-list ">
					<img src="/static/img/superbox/superbox-thumb-22.jpg" data-img="/static/img/superbox/superbox-full-22.jpg" alt="" class="superbox-img ">
		</div>
    		<div class="superbox-list ">
					<img src="/static/img/superbox/superbox-thumb-23.jpg" data-img="/static/img/superbox/superbox-full-23.jpg" alt="" class="superbox-img ">
		</div>
    		<div class="superbox-list ">
					<img src="/static/img/superbox/superbox-thumb-24.jpg" data-img="/static/img/superbox/superbox-full-24.jpg" alt="" class="superbox-img ">
		</div>
    	<div class="superbox-float">
			</div>
	</div>
	<script>
		$(function() {
			// Call SuperBox
			$('.superbox').SuperBox();
		});
	</script>
	</div>


		<h3>
		组件包	</h3>
	<pre class="prettyprint linenums"><span class="Huialert-danger">1  响应式图库依赖org.tinygroup.superBox包即可</span></pre>
		<h2>
		2 Bootstrap 三种图片应用	</h2>
	<div class="codeView bs-docs-example" >
				<img src="/static/img/pic.jpg" class="img-rounded" >
		<img src="/static/img/pic.jpg" class="img-circle" >
		<img src="/static/img/pic.jpg" class="img-thumbnail" >
	</div>
		<h3>
		组件包	</h3>
		<h2>
		3 头像	</h2>
	<div class="codeView bs-docs-example" >
		 		<i class="avatar radius avatar-mini  ">	<img src="/static/img/avatar-default-S.gif" >
</i>
		<i class="avatar radius avatar-S  ">	<img src="/static/img/avatar-default-S.gif" >
</i>
		<i class="avatar radius avatar-M  ">	<img src="/static/img/avatar-default-S.gif" >
</i>
		<i class="avatar radius avatar-L  ">	<img src="/static/img/avatar-default-S.gif" >
</i>
		<i class="avatar radius avatar-XL  ">	<img src="/static/img/avatar-default-S.gif" >
</i>
	</div>

	<pre class="prettyprint linenums"><span class="Huialert-danger">以上2 Bootstrap 三种图片应用和3 头像组件依赖org.tinygroup.picture包即可</span></pre>
		<h2>
		4 图片变焦收缩	</h2>
	<div class="codeView bs-docs-example ">
		<!--布局-->
	<div class="galleryContainer ">
		    <!--galleryEntry组件-->    
    		<div class="galleryImage " style="widrh:px;heightt:px" >
					<img src="/static/img/zoomPic/image01.jpg"></img>
      		<div class="infoSty">
		  <h2>BALLACKHUI 高级程序员</h2>
          <p>
						Tinyframwork用户手册奥	  	          </p>
	</div>
        </div>
    		<div class="galleryImage " style="widrh:px;heightt:px" >
					<img src="/static/img/zoomPic/image04.jpg"></img>
      		<div class="infoSty">
		  <h2>ATIZOSE 高级程序员</h2>
          <p>
						欢迎来到Tiny业务需求说明书	  	          </p>
	</div>
        </div>
    		<div class="galleryImage " style="widrh:px;heightt:px" >
					<img src="/static/img/zoomPic/image06.jpg"></img>
      		<div class="infoSty">
		  <h2>NISHIHE 高级程序员</h2>
          <p>
						数据库负载均衡框架开源啦 奥	  	          </p>
	</div>
        </div>
    	<p class="clearSty"></p>
	</div>
	</div>


		<h3>
		组件包	</h3>
	<pre class="prettyprint linenums"><span class="Huialert-danger">4 图片变焦收缩依赖org.tinygroup.zoomPic包即可</span></pre>
